<template>
  <div>

    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>保单管理</el-breadcrumb-item>
      <el-breadcrumb-item>投保历史信息</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card class="box-card">
      <!-- 头部的搜索和添加区域 -->
      <el-form :inline="true" :model="queryinfo" class="demo-form-inline">
        <el-form-item label="搜索内容">
          <el-input v-model="queryinfo.query" placeholder="搜索内容"></el-input>
        </el-form-item>
        <el-form-item label="业务类型">
          <el-select v-model="bizTypeList" multiple placeholder="业务类型">
            <el-option
              v-for="item in bizOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="推送状态">
          <el-select v-model="statusList" multiple placeholder="推送状态">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="经纪公司">
          <el-select v-model="brokerList" multiple placeholder="经纪公司">
            <el-option
              v-for="item in brokerOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="推送时间">
          <template>
            <div class="block">
              <!--                  <span class="demonstration">推送时间</span>-->
              <el-date-picker
                v-model="dateRange"
                format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right">
              </el-date-picker>
            </div>
          </template>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getProposalHistoryList()">查询</el-button>
          <el-button @click="resetQueryForm()">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格区域 -->
      <el-table
        :data="proposalHistoryList"
        border
        stripe
        style="width: 100%">
        <el-table-column
          label="序号"
          type="index">
        </el-table-column>

        <el-table-column
          prop="brokerName"
          label="经纪公司名称">
        </el-table-column>
        <el-table-column
          prop="createdDate"
          label="推送时间">
        </el-table-column>

        <el-table-column
          prop="bizType"
          label="业务类型">
          <template slot-scope="scope">
            <span>{{scope.row.bizType== 0 ? '批单' :scope.row.bizType== 1 ? '投保':scope.row.bizType== 4 ? '手续费' :scope.row.bizType== 5 ? '理赔':'未知'}}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="invokeStatus"
          label="推送状态">
          <template slot-scope="scope">
            <span>{{scope.row.invokeStatus== -1 ? '数据有误' :scope.row.invokeStatus== 0 ? '未推送':scope.row.invokeStatus== 1 ? '推送中':scope.row.invokeStatus== 2 ? '推送失败':"推送成功"}}</span>
          </template>
        </el-table-column>

        <el-table-column
          width="185"
          label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope)"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="remove(scope)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryinfo.pagenum"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="queryinfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>

    <!-- 编辑用户的对话框 -->
    <el-dialog
      title="查看历史记录信息"
      :visible.sync="editDialogVisible"
      width="60%"
      @close="editDialogClosed">
      <!-- 编辑用户的表单 -->
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="110px">

        <el-form-item label="经纪公司" prop="brokerName">
          <el-input v-model="editForm.brokerName" disabled></el-input>
        </el-form-item>
        <el-form-item label="业务类型 " prop="status">
          <el-radio-group v-model="editForm.bizType">
            <el-radio-button label="0" >批单</el-radio-button>
            <el-radio-button label="1" >投保</el-radio-button>
            <el-radio-button label="4" >手续费</el-radio-button>
            <el-radio-button label="5" >理赔</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="推送状态 " prop="invokeStatus">
          <el-radio-group v-model="editForm.invokeStatus">
            <el-radio-button label="-1" >数据有误</el-radio-button>
            <el-radio-button label="0" >未推送</el-radio-button>
            <el-radio-button label="1" >推送中</el-radio-button>
            <el-radio-button label="2" >推送失败</el-radio-button>
            <el-radio-button label="3" >推送成功</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="推送时间" prop="createdDate">
          <el-input v-model="editForm.createdDate"></el-input>
        </el-form-item>
        <el-form-item label="调用参数明文" prop="invokeParam">
          <el-input v-model="editForm.invokeParam"></el-input>
        </el-form-item>
        <el-form-item label="调用参数密文" prop="invokeParamEncrypt">
          <el-input v-model="editForm.invokeParamEncrypt"></el-input>
        </el-form-item>
        <el-form-item label="接口响应参数" prop="invokeResponse">
          <el-input v-model="editForm.invokeResponse"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
<!--        <el-button type="primary" @click="editProposal">确 定</el-button>-->
      </span>
    </el-dialog>


  </div>
</template>

<script>
  import mix from './ProposalHistory-mixins.js'
  export default {
    mixins: [mix]
  }
</script>

<style lang="less" scoped>
  .red {
    color: red;
  }

  .green {
    color: lightseagreen;
  }

  .zk-table {
    margin-top: 15px;
  }

  .el-cascader {
    width: 100%;
  }
</style>
